import { useNavigate } from "react-router-dom";
import { Badge, TabBar } from "antd-mobile";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  EyeFill,
  UserOutline,
} from "antd-mobile-icons";
// import wow from "../assets/svgs/wow.svg";

const MyTabBar = () => {
  const nav = useNavigate();
  const tabs = [
    {
      key: "/",
      title: "首页",
      index: true, // 默认首页
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: "/Microsurgery",
      title: "wz项目",
      icon: <EyeFill />,
      badge: "5",
    },
    {
      key: "/yaopin",
      title: "产品",
      icon: (active) => (active ? <MessageFill /> : <MessageOutline />),
      badge: "99+",
    },
    {
      key: "/user",
      title: "我的",
      icon: <UserOutline />,
    },
  ];

  // const [activeKey, setActiveKey] = useState("todo");

  return (
    <>
      <TabBar
        onChange={(path) => {
          // console.log(path);
          nav(path);
        }}
      >
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </>
  );
};

export default MyTabBar;
